<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分类列表</title>
    <link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../../static/css/commom.css">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称:</label>
                        <div class="layui-inline">
                            <input id="edtSearch" class="layui-input" type="text" placeholder="输入分类名称">
                        </div>
                        <div class="layui-inline">
                            <button id="btnSearch" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                        </div>
                        <div class="layui-inline">
                            <button id="addLink_btn" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-add-1"></i>添加
                            </button>
                        </div>
                        <div class="layui-inline">
                            <button id="delAll_btn" class="layui-btn layui-btn-danger icon-btn">
                                <i class="layui-icon layui-icon-delete"></i>批量删除
                            </button>
                        </div>
                    </div>
                </div>
                <table class="layui-table" id="categoryTable" lay-filter="categoryTable"></table>
            </div>
        </div>
    </div>
    <!-- 表格操作列 -->
    <script type="text/html" id="tableBar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="tableStateUser">
        <input type="checkbox" lay-filter="ckStateUser" value="{{d.newsStatus}}" lay-skin="switch"
            lay-text="正常|锁定" {{d.newsStatus==0?'checked':''}}/>
    </script>
    <!-- 表单弹窗 -->
    <script type="text/html" id="categoryAdd">
        <form id="categoryForm" lay-filter="categoryForm" class="layui-form model-form">
            <input name="id" type="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input name="classifyName" placeholder="请输入分类名称" type="text" class="layui-input" maxlength="20"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">关键词</label>
                <div class="layui-input-block">
                    <input name="keywords" placeholder="请输入关键词" type="text" class="layui-input" maxlength="20"
                        lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="describes" placeholder="请输入内容" class="layui-textarea" maxlength="200"></textarea>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
                <button class="layui-btn" lay-filter="categorySubmit" lay-submit>保存</button>
            </div>
        </form>
    </script>
    <script src="../../../static/libs/layui/layui.js"></script>
    <script src="../../../static/js/common.js"></script>
    <script>
        layui.use(["form","layer","table","upload","admin"],function () {  
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var upload = layui.upload;
            var admin = layui.admin;
            var $ = layui.jquery;
            //渲染表格
            var insTb = table.render({
                elem: '#categoryTable',
                url: '/blogClassifyController/getBlogClassify',
                page: true,
                cellMinWidth: 100,
                cols : [
                    [
                    {type: "checkbox", fixed:"left", width:50},
                   /* {field: 'id', title: 'ID', width:60, align:"center"},*/
                    {field: 'classifyName', title: '分类名'},
                    {field: 'keywords', title: '关键词', align:'center'},
                    {field: 'describes', title: '描述', align:'center', width:350},
                 /*   {field: 'status', title: '状态',  align:'center',templet:"#tableStateUser"},*/
                    {field: 'createTime', title: '发布时间', align:'center', minWidth:110, templet:function(d){
                        return d.createTime.substring(0,10);
                    }},
                    {title: '操作', width:130, templet:'#tableBar',fixed:"right",align:"center"}
                ]
                ]
            });
            //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
            $("#btnSearch").on("click",function(){
                table.reload("categoryTable",{
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        classifyName: $("#edtSearch").val().trim()  //搜索的关键字
                    }
                })
            });
             // 添加按钮点击事件
             $('#addLink_btn').click(function () {
                showEditModel();
            });
            // 修改用户状态
            form.on('switch(ckStateUser)', function (obj) {
                layer.load(2);
                $.get('../../static/json/ok.json', {
                    userId: obj.elem.value,
                    state: obj.elem.checked ? 0 : 1
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.success) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                        $(obj.elem).prop('checked', !obj.elem.checked);
                        form.render('checkbox');
                    }
                }, 'json');
            });
            // 批量删除
            $("#delAll_btn").click(function(){
                var checkStatus = table.checkStatus('categoryTable'),
                    data = checkStatus.data,
                    newsId = [];
                if(data.length > 0) {
                    for (var i in data) {
                        newsId.push(data[i].newsId);
                    }
                    layer.confirm('确定删除选中的分类？', {icon: 3,skin: 'layui-admin-skin',shade:0.1}, function (index) {
                        // $.get("删除文章接口",{
                        //     newsId : newsId  //将需要删除的newsId作为参数传入
                        // },function(data){
                            insTb.reload();
                        layer.close(index);
                        // })
                    })
                }else{
                    layer.msg("请选择需要删除的分类");
                }
            })
            // 工具条点击事件
            table.on('tool(categoryTable)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'edit') { // 修改
                    showEditModel(data);
                } else if (layEvent === 'del') { // 删除
                    doDel(data.id, data.classifyName);
                }
            });
            // 删除
            function doDel(userId, nickName) {
                layer.confirm('确定要删除“' + nickName + '”吗？', {
                    skin: 'layui-admin-skin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    $.get('/blogClassifyController/deleteBlogClassifyById', {
                        userId: userId
                    }, function (res) {
                        layer.closeAll('loading');
                        if (res.success) {
                            layer.msg(res.msg, {icon: 1});
                            insTb.reload({}, 'data');
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                });
            }
            // 显示表单弹窗
            function showEditModel(mUser) {
                admin.open({
                    type: 1,
                    skin: 'layui-admin-skin',
                    title: (mUser ? '修改' : '添加') + '分类',
                    content: $('#categoryAdd').html(),
                    success: function (layero, dIndex) {
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        var url = mUser ? '/blogClassifyController/updateBlogClassify' : '/blogClassifyController/insertBlogClassify';
                        // 回显数据
                        form.val('categoryForm', mUser);
                        // 表单提交事件
                        form.on('submit(categorySubmit)', function (data) {
                            layer.load(2);
                            $.get(url, data.field, function (res) {
                                layer.closeAll('loading');
                                if (res.success) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    insTb.reload({}, 'data');
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }, 'json');
                            return false;
                        });
                    }
                });
            }
        })
    </script>
</body>
</html>